<template>
  <div class="result-page">
    <div class="item" v-for="(item, index) of list" :key="item.attendance_time">
      <van-cell :title="item.attendance_time" />
      <van-icon
        class="arrow-icon"
        v-if="item.show"
        name="arrow-up"
        @click="showOrHide(index)"
      />
      <van-icon
        class="arrow-icon"
        v-if="!item.show"
        name="arrow-down"
        @click="showOrHide(index)"
      />
      <van-cell-group v-show="item && item.attance && item.show">
        <van-cell title="姓名" :value="item.name" />
        <van-cell title="公司" :value="item.company" />
        <van-cell title="工号" :value="item.user_id" />
        <template v-if="item.content && item.content.length">
          <van-cell title="总工时" :value="item.content['总工时']" />
          <van-cell title="部门" :value="item.content['部门']" />
          <van-cell title="转正日期" :value="item.content['转正日期']" />
        </template>
        <van-cell
          v-for="item of item.attance"
          :key="item.name"
          :title="item.name"
          :value="item.value | filter"
        />
      </van-cell-group>
    </div>
    <van-pagination
      @change="change"
      v-model="currentPage"
      :page-count="total"
      mode="simple"
    />
  </div>
</template>
<script>
import axios from "axios";
import protocol from "../api";
import qs from "qs";
import { Toast } from "vant";

export default {
  data() {
    return {
      list: {},
      total: 0,
      currentPage: 1
    };
  },
  filters: {
    filter(value) {
      return value && value.replace("<br>", "，");
    }
  },
  methods: {
    change(e) {
      this.currentPage = e;
      this.initData(this.currentPage);
    },
    showOrHide(index) {
      this.$set(this.list, [index], {
        ...this.list[index],
        show: !this.list[index].show
      });
    },
    initData(currentPage) {
      const _that = this;
      axios
        .post(
          `${protocol}/SalaryUser/GetAttence`,
          qs.stringify({
            page: currentPage,
            page_size: 12,
            user_id: _that.$route.query.user_id,
            name: _that.$route.query.name
          }),
          { headers: { "Content-Type": "application/x-www-form-urlencoded" } }
        )
        .then(res => {
          if (res && res.data && res.data.code != -1 && res.data.data) {
            _that.list = res.data.data.data;
            _that.total = Math.ceil(res.data.data.total / 12);
          } else {
            Toast.fail((res && res.data && res.data.msg) || "获取数据失败");
          }
        })
        .catch(e => {
          console.log(e);
        });
    }
  },
  mounted() {
    this.initData(this.currentPage);
  }
};
</script>
<style scoped>
.item {
  position: relative;
}
.arrow-icon {
  position: absolute;
  right: 20px;
  top: 10px;
}
</style>
